<!--
 * @Author: byron
 * @Date: 2021-09-25 19:43:33
 * @LastEditTime: 2021-09-28 17:55:16
-->

<script type="text/ecmascript-6">
export default {
  name: "Icon",
  components: {},
  props: {
    // Icon大小
    size: {
      type: Number,
      default: 16,
    },
    // Icon种类
    type: {
      type: String,
      required: true,
    },
    // Icon颜色
    color: {
      type: String,
      default: "",
    },
    // Icon颜色
    blod: {
      type: Boolean,
      default: false,
    },
    // Icon背景
    backdrop: {
      type: Boolean,
      default: false,
    },
    click: {
      type:Function,
      default: null,
    },
  },
  data() {
    return {};
  },
  watch: {},
  computed: {},
  methods: {
    onClick(e){
      this.$emit('click',e)
    },
    getIconCls() {
      let cls = `icon-${this.type}`;
      return cls;
    },
    getIconStyle() {

      let  IconStyle = { fontSize: `${this.size}px` };
      if (this.color) {
      IconStyle.color = this.color;
      }
      if(this.blod){
        IconStyle.fontWeight = 700;
      }
      return IconStyle;
    },
  },
  created() {
  },
  mounted() {
  },
  render() {
    const Icon = (
      <i onClick={this.onClick}
        class={`iconfont icon-component ${this.getIconCls()}`}
        style={this.getIconStyle()}
      ></i>
    );
    if (this.backdrop) {
      const backDropSize = "26px";
      return (
        <span
          style={{ width: backDropSize, height: backDropSize,lineHeight:backDropSize }}
          class="backdrop"
        >
          {Icon}
        </span>
      );
    }
    return Icon;
  },
};
</script>
<style lang="scss" scoped>
.icon-component {
    cursor: pointer;
}
.backdrop {
    @include flex-center;
    &:hover {
        border-radius: 50%;
        background-color: var(--button-hover-bgcolor);
    }
}
.icon-color-red {
    color: red;
}
</style>
